/* src/styles/sidebar.css */
.sidebar {
  background-color: var(--color-secondary); /* 深蓝色背景 */
  color: var(--color-white); /* 白色文字 */
  width: 220px; /* 固定宽度 */
  position: fixed; /* 固定在页面左侧 */
  left: 0; /* 靠左对齐 */
  padding: 20px; /* 内边距 */
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  display: flex;
  flex-direction: column; /* 垂直布局 */
  justify-content: flex-start; /* 从顶部开始排列 */
  gap: 20px; /* 每个列表项之间的间距 */
}

.sidebar ul {
  list-style: none; /* 移除列表样式 */
  padding: 0;
  margin: 0;
}

.sidebar ul li {
  margin: 0; /* 移除外边距 */
}

.sidebar ul li router-link {
  color: var(--color-white); /* 链接颜色为白色 */
  text-decoration: none; /* 移除下划线 */
  font-size: 1.1rem; /* 设置字体大小 */
  font-weight: 600; /* 粗体 */
  transition: color 0.3s ease; /* 悬停效果的过渡动画 */
}

.sidebar ul li router-link:hover {
  color: var(--color-accent); /* 悬停时变为橙色 */
}